<template>

  <div class="container">
    <a-carousel  style="width: 100%; margin-top: 20px">
      <template #prevArrow>
        <div class="custom-slick-arrow" style="left: 10px;right: 10px; z-index: 1">
          <left-circle-outlined />
        </div>
      </template>
      <template #nextArrow>
        <div class="custom-slick-arrow" style="right: 10px">
          <right-circle-outlined />
        </div>
      </template>
      <div v-for="data in dailyHotQuestion" >
        <span style="color: red">!!!今日火热第{{data.order}}名!!!</span>
        题目:<a :href='questionInfoUrl+"/"+data.titleSlug'>{{data.title}}</a>
        难度:{{data.difficulty}}
      </div>
    </a-carousel>
    <div class="left-section">
      <div>

      </div>
      <div style="display: flex">
        <a-button type="primary" @click="recommandAgain(activeKey)" :loading="recommandAgainLoading">
          <div style="display: flex">
            <img src="../assets/img.png" style="display: flex;width: 20px">
            换一批
          </div>
        </a-button>
      </div>
      <a-tabs v-model:activeKey="activeKey" >
        <a-tab-pane v-if="isLogin()" key="1" tab="与你臭味相同的人也喜欢" :onclick="queryRecommendQuestion(activeKey)">
          <div>
            <a-card  style="width: 80%">
              <a-card-grid style="width: 20%; text-align: center" v-for="data in questionInfo">
                题目:<a :href='questionInfoUrl+"/"+data.titleSlug'>{{data.title}}</a>
                <br>
                <div :class="getDifficultyColor(data.difficulty)">
                  难度:{{data.difficulty}}
                </div>                <br>
                <template v-for="type in data.types" :key="type">
                  <a-checkable-tag
                  >
                    {{ type }}
                  </a-checkable-tag>
                </template>
              </a-card-grid>
            </a-card>
          </div>
        </a-tab-pane>
        <a-tab-pane   key="2" tab="猜你喜欢">
          <div>
            <a-card  style="width: 80%">
              <a-card-grid style="width: 20%; text-align: center" v-for="data in questionInfo">
                题目:<a :href='questionInfoUrl+"/"+data.titleSlug'>{{data.title}}</a>
                <br>
                <div :class="getDifficultyColor(data.difficulty)">
                  难度:{{data.difficulty}}
                </div>
                <br>
                <template v-for="type in data.types" :key="type">
                  <a-checkable-tag
                  >
                    {{ type }}
                  </a-checkable-tag>
                </template>
              </a-card-grid>
            </a-card>
          </div>
        </a-tab-pane>
      </a-tabs>



    </div>
    <div class="right-section">
      <div class="elevated-box">
        <a-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange" :key="calendarKey">
          <template #headerRender="{ value: current, type, onChange, onTypeChange }">
            <div style="padding: 10px">
              <div style="margin-bottom: 10px">Custom header</div>
              <a-row type="flex" justify="space-between">
                <a-col>
                  <a-radio-group size="small" :value="type" @change="e => onTypeChange(e.target.value)">
                    <a-radio-button value="month">Month</a-radio-button>
                    <a-radio-button value="year">Year</a-radio-button>
                  </a-radio-group>
                </a-col>
                <a-col>
                  <a-select
                      size="small"
                      :dropdown-match-select-width="false"
                      class="my-year-select"
                      :value="String(current.year())"
                      @change="
                  newYear => {
                    onChange(current.year(+newYear));
                  }
                "
                  >
                    <a-select-option
                        v-for="val in getYears(current)"
                        :key="String(val)"
                        class="year-item"
                    >
                      {{ val }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col>
                  <a-select
                      size="small"
                      :dropdown-match-select-width="false"
                      :value="String(current.month())"
                      @change="
                  selectedMonth => {
                    onChange(current.month(parseInt(String(selectedMonth), 10)));
                  }
                "
                  >
                    <a-select-option
                        v-for="(val, index) in getMonths(current)"
                        :key="String(index)"
                        class="month-item"
                    >
                      {{ val }}
                    </a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </div>
          </template>

          <template #dateFullCellRender="{ current: value }" v-model="value">
            <a  v-if="getSpecificDayQuestion(value)!=''" :href="'/questionInfo/'+getSpecificDayQuestion(value)" :class="getDateCss(value).value.css" class="tooltip">
              <span v-if="calendarKey==='true'" class="tooltiptext" v-bind:title="getSpecificDayQuestion(value)"></span>
              {{ value.date() }}
            </a>
            <span v-else>{{value.date()}}</span>
          </template>
        </a-calendar>
      </div>

    </div>
  </div>
</template>
<script>
import { usePagination } from 'vue-request';
import {computed, defineComponent, onMounted, reactive, ref, toRefs} from 'vue';
import axios from 'axios';
import {isReturnTrue, reload} from "@/util/util";
import router from "@/router";
import {LeftCircleOutlined, RightCircleOutlined} from "@ant-design/icons-vue";
import dayjs from "dayjs";


export default defineComponent({
  components: {
    LeftCircleOutlined,
    RightCircleOutlined,
  },
  setup() {
    const isLogin=()=>{
      console.log("login")
      console.log(window.localStorage.getItem("USERINFO")!=null&&window.localStorage.getItem("USERINFO")!='null')
      return window.localStorage.getItem("USERINFO")!=null&&window.localStorage.getItem("USERINFO")!='null'
    }
    const questionInfoUrl='questionInfo'
    const recommandAgainLoading=ref(false)
    const recommandAgain=(type)=>{
      recommandAgainLoading.value=true
      queryRecommendQuestion(type)
      recommandAgainLoading.value=false
    }
    const state = reactive({
      tags: ['Movies', 'Books', 'Music', 'Sports'],
      selectedTags: [],
    });
    const dailyHotQuestion=ref([{
      title:'',
      name:'',
      title_slug:'',
      difficulty:'',
      types:[],
      flag:'',
      order:''
    }])
    const hotPage=ref(1)
    const getDailyHotQuestion=()=>{
      axios.post("/core/t-question/hot",{
        pageSize:10,
        pageNo:hotPage.value
      }).then((response)=>{
        if(isReturnTrue(response.data.code)){
          dailyHotQuestion.value=response.data.data.records;
        }
        else{
          alert(response.data.message)
        }
      })
    }
    const onChange = current => {
    };
    const questionInfo=ref([{
      title:'',
      name:'',
      title_slug:'',
      difficulty:'',
      types:[],
      flag:''
    }])
    const queryRecommendQuestion=(type)=>{
      if(type==='1'){
        axios.get("/core/t-question/recommend?number="+20).then((response)=>{
          if(isReturnTrue(response.data.code)){
            questionInfo.value=response.data.data
          }
          else{
            alert(response.data.message)
          }
        })
      }
      if(type==='2'){
        axios.get("/core/t-question/recommend/item?number="+20).then((response)=>{
          if(isReturnTrue(response.data.code)){
            questionInfo.value=response.data.data
          }
          else{
            alert(response.data.message)
          }
        })
      }

    }
    const getAllDifficulty=()=>{
      axios.get("/core/enum/difficulty").then((response)=>{
        if(isReturnTrue(response.data.code)){
          difficulty.value=response.data.data;
          for (let i = 0; i < response.data.data.length; i++) {
            difficultyMap.set(difficulty[i].code,difficulty[i].color)
          }
        }
        else{
          alert(response.data.message);
        }
      })
    }
    const difficultyMap=new Map()
    const difficulty=ref([{
      name:'',
      code:'',
      color:'',
      score:''
    }]);
    const calendarKey=ref('');
    const dailyQuestions=ref([])
    const getMonthData = value => {
      if (value.month() === 8) {
        return 1394;
      }
    };
    const value = ref();
    const onPanelChange = (value, mode) => {
    };
    const getMonths = value => {
      const localeData = value.localeData();
      const months = [];
      for (let i = 0; i < 12; i++) {
        months.push(localeData.monthsShort(value.month(i)));
      }
      return months;
    };
    const getSpecificDayQuestion=(value)=>{
      if(getCurrentMonth()===value.month()+1){
        return dailyQuestion[value.date()-1]===undefined?'':dailyQuestion[value.date()-1].titleSlug
      }
      return ''
    }
    const getCurrentMonth=()=>{
      return dayjs().month() + 1;
    }
    const getYears = value => {
      const year = value.year();
      const years = [];
      for (let i = year - 10; i < year + 10; i += 1) {
        years.push(i);
      }
      return years;
    };
    // 日期样式设置
    const getDateCss =  (val) => {
      const day = val.date();
      const currentMonth = dayjs().month() + 1;
      const month = val.month() + 1;
      const res = ref({
        css: '',
        title: ''
      })
      if (currentMonth != month ) {
        res.value.css="date_work"
        return res
      }
      // res.value.title=dailyQuestion.value[day].titleSlug
      // 如果是周六周日
      if (isDailyFinished(val)) {
        res.value.css = "date_week"
        return res;
      } else {
        res.value.css = "date_work"
        return res;
      }
    };
    let dailyQuestion=reactive([{
      titleSlug:'',
      currentDateTime:'',
      isFinished:false
    }]);
    const isDailyFinished=(value)=>{
      if(getCurrentMonth()===value.month()+1){
        return dailyQuestion[value.date()-1]===undefined?false:dailyQuestion[value.date()-1].isFinished
      }
      return false;
    }
    const getDailyQuestion=async () => {
      await axios.get("/core/t-question/dailyQuestion").then((response) => {
        if (isReturnTrue(response.data.code)) {
          dailyQuestion = response.data.data
          calendarKey.value='true'
        } else {
          alert(response.data.message)
        }
      })
    };
    const activeKeyExecute=()=>{
      if(isLogin()){
        activeKey.value='1'
      }
      else{
        activeKey.value='2'
      }
      console.log("active"+activeKey.value)
    }
    const activeKey=ref('1')
    onMounted(()=>{
      reload()
      getAllDifficulty()
      queryRecommendQuestion('1')
      queryRecommendQuestion('2')
      activeKeyExecute()
      getDailyQuestion()
      getDailyHotQuestion()
    });
    const getDifficultyColor=(text)=>{
      if(text==='EASY'){
        return "green"
      }
      if(text==='MEDIUM')
      {
        return "yellow"
      }
      return "red"
    }
    return {
      onChange,
      dailyHotQuestion,
      getDailyHotQuestion,
      queryRecommendQuestion,
      ...toRefs(state),
      questionInfo,
      getAllDifficulty,
      difficulty,
      difficultyMap,
      recommandAgain,
      recommandAgainLoading,
      questionInfoUrl,
      getMonthData,
      onPanelChange,
      getMonths,
      getYears,
      dailyQuestions,
      getDateCss,
      getDailyQuestion,
      dailyQuestion,
      getCurrentMonth,
      getSpecificDayQuestion,
      calendarKey,
      isDailyFinished,
      activeKey,
      getDifficultyColor,
      isLogin

    };
  },
});
</script>
<style scoped>
/* For demo */
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: cornflowerblue;
  overflow: hidden;
}

.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
  z-index: 1;
}
.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
}
.ant-carousel :deep(.custom-slick-arrow:hover) {
  opacity: 0.5;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}
</style>
<style>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
  position: absolute;
  left: 5%;
  top: 3%;
}
.left-section {
  flex: 1;
  flex-basis: 50%;
  padding: 20px;
}
.right-section{
  position: absolute;
  top: 250px;
  flex: 0 0 300px;
  left: 80%;
}
.elevated-box {
  position: sticky;
  top: 0;
  width: 300px;
  height: 500px;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
}
.date {
  position: relative;
  z-index: 2;
  display: inline-block;
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 2px;
  transition: background 0.3s, border 0.3s;
}
.date_week {
  position: relative;
  z-index: 2;
  display: inline-block;
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 2px;
  transition: background 0.3s, border 0.3s;
  background-color: #3ff53f;
}
/*.date_work {*/
/*  position: relative;*/
/*  z-index: 2;*/
/*  display: inline-block;*/
/*  min-width: 24px;*/
/*  height: 24px;*/
/*  line-height: 24px;*/
/*  border-radius: 2px;*/
/*  transition: background 0.3s, border 0.3s;*/
/*  background-color: rgb(20, 134, 228);*/
/*}*/

/* Tooltip 容器 */
.tooltip {
  position: relative;
  /*display: inline-block;*/
  /*border-bottom: 1px dotted black; !* 悬停元素上显示点线 *!*/
}

/* Tooltip 文本 */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  /*background-color: black;*/
  color: #fff;
  text-align: center;
  padding: 10px 0;
  border-radius: 20px;
  /* 定位 */
  position: absolute;
  z-index: 1;
}
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.red{
  color: red;
}.green{
   color: green;
 }.yellow{
    color: brown;
  }
</style>